.code-sections {
  ul {
    padding-left: 0;
  }

  // nb. This is intentionally recursive.
  .code-sections {
    border: 1px solid var(--color-hairline);
    padding: calc(#{get-size(300)} - 1px);

    /* stylelint-disable-next-line selector-max-compound-selectors */
    ul > li:first-child {
      border-top: 0;
      padding-top: 0;
    }
  }

  .type--small {
    font-size: 0.875em;
    line-height: 2em;
  }
}

// This is a slightly smaller label used by API pages which doesn't match the
// regular type system.
.code-sections__label {
  @include font-setup(14px, 28px);
}

.code-sections__type > :not(:last-child) {
  margin-right: 0.5ch;
}

.code-sections__enum {
  margin-bottom: 1rem;
}

.code-sections__icon {
  &::before {
    // By default, we show the 'object' icon.
    // The 1.25em used for width/height resolves to 15px.
    background: url('') center / contain no-repeat;
    content: '';
    display: inline-block;
    height: 1.25em;
    margin-right: 0.5ch;
    vertical-align: middle;
    width: 1.25em;
  }

  &.code-sections__icon--number::before {
    background-image: url('');
  }

  &.code-sections__icon--string::before {
    background-image: url('');
  }

  &.code-sections__icon--boolean::before {
    background-image: url('');
  }

  &.code-sections__icon--function::before {
    background-image: url('');
  }

  &.code-sections__icon--array::before {
    background-image: url('');
  }

  &.code-sections__icon--reference::before {
    background-image: url('');
  }
}

.code-sections__optional {
  color: var(--color-pink-medium);
}

.code-sections__value {
  color: var(--color-code-number);
}

.code-sections__deprecated {
  color: var(--color-red-medium);
}

.code-sections__callback {
  background: get-color('grey-50');
  border: 1px solid var(--color-hairline);
  display: block;
  padding: 0.5em;

  > code {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
  }
}

// If this is used within a paragraph, space it from the text above.
p > .code-sections__callback {
  margin-top: 0.5em;
}

.code-sections__overline {
  // This is used to describe enums and so on which don't have a left notice.
  border-top: 1px solid var(--color-hairline);
  margin: 1em 0;
  padding-top: get-size(300);
}

.code-sections__mode {
  color: var(--color-code-comment);
  text-transform: uppercase;
}

.code-sections li {
  border-top: 1px solid var(--color-hairline);
  display: flex;
  flex-direction: column;
  padding-top: get-size(300);
  position: relative;

  > :first-child {
    @include apply-utility('weight', 'medium');
    flex: 0 0 auto;
    flex-shrink: 1;
    min-width: px-to-rem(144px);
    padding-right: get-size(300);
  }

  > :not(:first-child) {
    flex-grow: 1;
  }
}

.code-sections--summary {
  padding-left: 0;

  > li:first-child {
    border-top: 0;
    padding-top: 0;
  }

  > li {
    @include media-query('lg') {
      flex-direction: row;
    }

    > :first-child {
      // This makes the "Description", "Types" and so on left-columns small.
      // We avoid "!important" here only because we are _below_ the
      // ".code-sections li > :first-child" selector which is above this file.
      min-width: px-to-rem(104px);
    }
  }
}
